<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js"> <!--<![endif]-->
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="description" content="Aviato E-Commerce Template">

    <meta name="author" content="">

    <title>Aviato | E-commerce template</title>

    <!-- Mobile Specific Meta-->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Favicon -->
    <link rel="shortcut icon" type="image/x-icon" href="../../images/favicon.png"/>

    <!-- Themefisher Icon font -->
    <link rel="stylesheet" href="../../plugins/themefisher-font/style.css">
    <!-- bootstrap.min css -->
    <link rel="stylesheet" href="../../plugins/bootstrap/css/bootstrap.min.css">

    <link rel="stylesheet" type="text/css" href="../../plugins/slick-carousel/slick/slick.css"/>
    <link rel="stylesheet" type="text/css" href="../../plugins/slick-carousel/slick/slick-theme.css"/>

    <!-- Main Stylesheet -->
    <link rel="stylesheet" href="../../css/style.css">

</head>

<body id="body">

<!-- Start Top Header Bar -->
<jsp:include page="common/top-header.jsp"/>
<!-- End Top Header Bar -->

<!-- Main Menu Section -->
<jsp:include page="common/main-menu.jsp"/>


<div class="home-slider">
    <div>
        <div class="slider-item dark-bg" style="background-image:url('../../images/slider/slider-1.jpg')">
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <div class="slide-inner text-left">
                            <h1>Minimal Summer Collection</h1>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae aut illum ratione?
                                <br> Aliquam facilis dolorem dolor illum saepe commodi ratione.</p>
                            <a href="/shop/shop.do?current_page=1" class="btn btn-main">Buy Now</a>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
    <div>
        <div class="slider-item white-bg" style="background-image:url('../../images/slider/slider-2.jpg')">
            <div class="container">
                <div class="slide-inner text-center">
                    <h1>Weeding Business & Casual</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae aut illum ratione? <br>
                        Aliquam facilis dolorem dolor illum saepe commodi ratione.</p>
                    <a href="" class="btn btn-main">Buy Now</a>
                </div>
            </div>
        </div>
    </div>
    <div>
        <div class="slider-item dark-bg"
             style="background-image:url('../../images/slider/slider-3.jpg'); background-position:50%;background-repeat:no-repeat;">
            <div class="container">
                <div class="slide-inner text-left">
                    <h1>Stylish & Scalable</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae aut illum ratione? <br>
                        Aliquam facilis dolorem dolor illum saepe commodi ratione.</p>
                    <a href="" class="btn btn-main">Buy Now</a>
                </div>
            </div>
        </div>
    </div>
</div>


<section class="product-category section">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="title text-center">
                    <h2>Product Category</h2>
                </div>
            </div>
            <div class="col-md-6">
                <div class="category-box">
                    <a href="">
                        <img src="../../images/shop/category/category-1.jpg" alt=""/>
                        <div class="content">
                            <h3>Clothes Sales</h3>
                            <p>Shop New Season Clothing</p>
                        </div>
                    </a>
                </div>
                <div class="category-box">
                    <a href="">
                        <img src="../../images/shop/category/category-2.jpg" alt=""/>
                        <div class="content">
                            <h3>Smart Casuals</h3>
                            <p>Get Wide Range Selection</p>
                        </div>
                    </a>
                </div>
            </div>
            <div class="col-md-6">
                <div class="category-box category-box-2">
                    <a href="">
                        <img src="../../images/shop/category/category-3.jpg" alt=""/>
                        <div class="content">
                            <h3>Jewellery</h3>
                            <p>Special Design Comes First</p>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>
<div class="tlinks">Collect from <a href="http://www.cssmoban.com/">自助建站</a></div>
<section class="products section bg-gray">
    <div class="container">
        <div class="row">
            <div class="title text-center">
                <h2>Trendy Products</h2>
            </div>
        </div>
        <div class="row">
            <c:forEach items="${products}" var="pro">
                <div class="col-md-4">
                    <div class="product-item">
                        <div class="product-thumb">
                            <span class="bage">Sale</span>
                            <img class="img-responsive" src="${pro.img}" alt="product-img"/>
                            <div class="preview-meta">
                                <ul>
                                    <li>
									<span data-toggle="modal" data-target="#product-modal" onclick="findId(${pro.id})">
										<i class="tf-ion-ios-search-strong"></i>
									</span>
                                    </li>
                                    <li>
                                        <a onclick="insertFavorite(${user.u_id},${pro.id})"><i class="tf-ion-ios-heart" ></i></a>
                                    </li>
                                    <li onclick="insertCart(${pro.id})">
                                        <a ><i class="tf-ion-android-cart"></i></a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="product-content">
                            <h4><a href="favorite.jsp">${pro.name}</a></h4>
                            <p class="price"> $${pro.price}</p>
                        </div>
                    </div>
                </div>
            </c:forEach>

            <!-- Modal -->
            <jsp:include page="common/modal.jsp"/>
            <!-- /.modal -->

        </div>
    </div>
</section>


<!--
Start Call To Action
==================================== -->
<%--<section class="call-to-action bg-gray section">--%>
    <%--<div class="container">--%>
        <%--<div class="row">--%>
            <%--<div class="col-md-12 text-center">--%>
                <%--<div class="title">--%>
                    <%--<h2>SUBSCRIBE TO NEWSLETTER</h2>--%>
                    <%--<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat, <br> facilis numquam impedit ut--%>
                        <%--sequi. Minus facilis vitae excepturi sit laboriosam.</p>--%>
                <%--</div>--%>
                <%--<div class="col-lg-6 col-md-offset-3">--%>
                    <%--<div class="input-group subscription-form">--%>
                        <%--<input type="text" class="form-control" placeholder="Enter Your Email Address">--%>
                        <%--<span class="input-group-btn">--%>
				        <%--<button class="btn btn-main" type="button">Subscribe Now!</button>--%>
				      <%--</span>--%>
                    <%--</div><!-- /input-group -->--%>
                <%--</div><!-- /.col-lg-6 -->--%>

            <%--</div>--%>
        <%--</div>        <!-- End row -->--%>
    <%--</div>    <!-- End container -->--%>
<%--</section>   <!-- End section -->--%>


<jsp:include page="common/footer.jsp"></jsp:include>

<a class="btn btn--success btn--floating box-shadow-wide" target="_blank" href="#products/aviato-e-commerce-template/">
    <span class="btn__text">
        Purchase Full Template Pack
    </span>
</a>


<!--
Essential Scripts
=====================================-->


<!-- Main jQuery -->
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<!-- Bootstrap 3.1 -->
<script src="../../plugins/bootstrap/js/bootstrap.min.js"></script>

<!-- Slick Carousel -->
<script src="../../plugins/slick-carousel/slick/slick.min.js"></script>


<!-- Main Js File -->
<script src="../../js/script.js"></script>

<%--<script type="text/javascript">--%>
    <%--function insertCart(id) {--%>
        <%--$.ajax({--%>
            <%--type:"POST",--%>
            <%--url:"/cart/insert.do",--%>
            <%--data:{"id":id},--%>
            <%--success:function(){--%>
                <%--window.location.reload();--%>
            <%--}--%>
        <%--})--%>
    <%--}--%>
<%--</script>--%>

</body>
</html>
